<script setup>
import { ref, inject, onMounted } from "vue";
import tool from '@/utils/tool';
import { comma } from "postcss/lib/list";
import { all } from "axios";


//父级配置
const options = inject('options')
const columns = inject('columns')
const visible = ref(false);
const allowShowColumns = ref([])

const emit = defineEmits([ 'onChangeSearchHide', 'onChangeColumnHide' ])
//设置可显示列
const setShowColumns = () => {
  allowShowColumns.value = columns.value.filter(item => {
    return ! (item?.settingHide ?? false)
  })
}

const handleClose = () => {
  visible.value = false;
};
const open = () => {
  setShowColumns()
  visible.value = true
}
const formModel = ref({
    size:options.size,
    borderType:'all',
    stripe:options.stripe,
});
//边框类型
const changeBordered = (v) => {
  if(v == 'all')
  {
    options.bordered = true
  }
  if(v == 'no_row_border')
  {
    options.bordered = false
  }
  if(v == 'no_cell_border')
  {
    options.bordered = false
  }

  if(v == 'no_out_border')
  {
    options.outBordered = false;
    options.bordered = false
  }
}
//斑马纹
const changeStripe = (v)=>{
  options.stripe = v
}

//表格大小
const changeSize = (v)=>{
  options.size = v
}

const handleWidthChange = (row) =>{
  console.log(row)
}

defineExpose({ open });
</script>
<template>
  <el-drawer
    v-model="visible"
    title="设置"
    :before-close="handleClose"
    class="wd-drawer"
    size="900"
  >
    <el-scrollbar>
      <!-- <el-form :model="formModel" label-position="left">
        <el-space>
            <el-form-item label="表格大小">
                <el-radio-group v-model="formModel.size" @change="changeSize">
                    <el-radio-button label="小" value="small" />
                    <el-radio-button label="中" value="default" />
                    <el-radio-button label="大" value="large" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="表格边框">
                <el-radio-group v-model="formModel.borderType" @change="changeBordered">
                    <el-radio-button label="不显示外边框" value="no_out_border" />
                    <el-radio-button label="全部显示" value="all" />
                    <el-radio-button label="不显示行" value="no_row_border" />
                    <el-radio-button label="不显示列" value="no_cell_border" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="斑马纹" label-position="left">
                <el-checkbox v-model="formModel.stripe"  size="large" @change="changeStripe" />
            </el-form-item>
        </el-space>
      </el-form> -->
      <el-table :data="allowShowColumns" stripe class="mt-3" border size="">
        <el-table-column prop="title" label="列名称" align="left" min-width="180"></el-table-column>
        <el-table-column prop="width" label="宽度" align="center" width="180">
          <template #default="scope">
            <template v-if="scope.row.dataIndex == '__operation'">/</template>
            <el-input-number v-else v-model="scope.row.width" :min="1" :max="5000" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="hide" label="隐藏" align="center" width="80">
          <template #default="scope">
           <el-checkbox v-model="scope.row.hide" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="fixed" label="固定" align="center" width="180">
          <template #default="scope">
            <template v-if="scope.row.dataIndex == '__operation'">/</template>
            <el-radio-group v-else class="__table_radio" v-model="scope.row.fixed" size="small" >
                <el-radio label="否" value="" />
                <el-radio label="左侧" value="left" />
                <el-radio label="右侧" value="right" />
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <template #footer>
     <div class="tw-mt-6"></div>
    </template>
  </el-drawer>
</template>
<style lang="less" scoped>
.wd-drawer {
  .el-drawer__body {
    .el-scrollbar__wrap {
      .el-form-item {
        display: flex;
        align-items: center;
        margin-bottom: 17.5px;
      }
      .wd-shop-layout-item {
        display: block !important;
      }
      .el-form-item__label {
        flex: 1 1;
      }
      .el-form-item__content {
        flex: 0 0 auto;
      }
    }
  }
  .el-drawer__footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: calc(var(--el-z-index) + 1);
      padding: calc(var(--el-padding) / 2);
      background: var(--el-color-white);
      border-top: 1px solid var(--el-border-color);
  }
}
.__table_radio{
  .el-radio{
    margin-right: 10px!important;
  }
}
</style>